<!DOCTYPE html>
<meta charset="utf-8">
<style>
    *, *:before, *:after {
      box-sizing: border-box;
      outline: none;
    }
    
    body {
      background: #22B573;
      font: 14px/1 'Open Sans', helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    
    .box {
      height: 200px;
      width: 200px;
      position: relative;
      margin: 0 auto;
      border-radius: 100%;
      overflow: hidden;
    }
    .box .percent {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 32px;
    }
    .box .water {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      -webkit-transform: translate(0, 100%);
              transform: translate(0, 100%);
      background: linear-gradient(rgba(255,255,255,0.2),rgba(255, 255, 255, 0.5));
      transition: all .3s;
    }
    .box .water_wave {
      width: 200%;
      position: absolute;
      bottom: 100%;
    }
    .box .water_wave_back {
      right: 0;
      fill: rgba(255,255,255,.1);
      -webkit-animation: wave-back 2s infinite linear;
              animation: wave-back 2s infinite linear;
    }
    .box .water_wave_front {
      left: 0;
      fill: rgba(255,255,255,.1);
      -webkit-animation: wave-front 1s infinite linear;
              animation: wave-front 1s infinite linear;
    }
    
    @-webkit-keyframes wave-front {
      100% {
        -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
      }
    }
    
    @keyframes wave-front {
      100% {
        -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
      }
    }
    @-webkit-keyframes wave-back {
      100% {
        -webkit-transform: translate(50%, 0);
                transform: translate(50%, 0);
      }
    }
    @keyframes wave-back {
      100% {
        -webkit-transform: translate(50%, 0);
                transform: translate(50%, 0);
      }
    }
    .tableBox{
        
        
    }
    .table{
        margin: 30px auto 0;
    }
    .table td>div{
        color: #fff;
        font-size: 14px;
    }
    .table td{
        text-align: center;
        vertical-align: middle;
    }
    .cdnum{
        min-width: 150px;
        font-size: 20px;
        text-align: center;
    }
    .cdntxt{
        min-width: 150px;
        margin-top: 10px;
        text-align: center;
    }
    .km{
        width: 100%;
        height: 30px;
    }
    .cdtime{
        display: inline-block;
        margin-top: 5px;
    }
    
    </style>
    
<body class="gray-bg">
<div class="wrapper wrapper-content ">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none;">
            <symbol id="wave">
                <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
                <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
                <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
                <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
            </symbol>
        </svg>
        <div class="box">
            <div class="percent">
                <div class="percentNum" id="count">0</div>
                <div class="percentB">%</div>
            </div>
            <div id="water" class="water">
                <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
                    <use xlink:href="#wave"></use>
                </svg>
                <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
                    <use xlink:href="#wave"></use>
                </svg>
            </div>
        </div>
        <div class="tableBox">
            <table class="table">
                <tbody>
                    <tr>
                        <!-- <td>
                            <div><span class="mustInput">*</span>进度：</div>
                            <div><div id="soc"></div></div>
                        </td> -->
                        <td>
                            <div><div id="dn" class="cdnum"></div></div>
                            <div class="cdntxt">已冲电量</div>
                        </td>
                        <td>
                            <div><div id="time" class="cdnum"></div></div>
                            <div class="cdntxt">已冲时长</div>
                        </td>
                        <td>
                            <div><div id="usingMoney" class="cdnum"></div></div>
                            <div class="cdntxt">已冲金额</div>
                        </td>
                        
                    </tr>
                    <tr>
                        <td colspan="3"><div class="km"></div></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="cdtime"><span>预计充满时间：</span><span id="fullTime"></span></div>
                        </td>
                            
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="cdtime" ><span>剩余金额：</span><span id="syMoney"></span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
        </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var orderId = [[${orderId}]];

    $(function () {
        load();
    });

    function load() {
        $.ajax({
            url: ctx+"monitorCenter/getCharge?id="+orderId,
            dataType: "JSON",
            type: "GET",
            async: false,
            success: function(data) {
                if(data.data!=null){
                    $("#soc").text(data.data.soc+'%');
                    $("#dn").text(data.data.dn+'度');
                    $("#time").text(formatSeconds(data.data.time));
                    $("#usingMoney").text(data.data.usingMoney+'元');
                    $("#fullTime").text(toHourMinute(data.data.fullTime));
                    $("#syMoney").text(data.data.syMoney+'元');
                    dynamic(data.data.soc)
                    
                }
            }
        });
    }

    function toHourMinute(minutes){
        return (Math.floor(minutes/60) + "小时" + (minutes%60) + "分" );
        // 也可以转换为json，以方便外部使用
        // return {hour:Math.floor(minutes/60),minute:(minutes%60)};
    }
    function dynamic(num){
        var cnt=document.getElementById("count"); 
        var water=document.getElementById("water");
        var percent=cnt.innerText;
        var interval;
        interval=setInterval(function(){ 
            cnt.innerHTML = percent; 
            if(percent>=num){
                clearInterval(interval)
            }
            water.style.transform='translate(0'+','+(100-percent)+'%)';
            percent++; 
            if(percent==100){
            clearInterval(interval);
            }
        },60);
    }
</script>
</body>
</html>